<template>
  <popup
    class="mr-2 inline"
    width="800px"
    :clickModalClose="false"
    @open="getdetial"
    title="提现详情"
    @confirm="handleconfirm"
  >
    <template #trigger>
      <el-link type="primary" :underline="false">{{ title }}</el-link>
    </template>

    <div class="ml-6">
      <el-row>
        <el-col :span="12"
          ><div class="grid-content ep-bg-purple">
            <el-form :model="formData" class="demo-form-inline">
              <el-form-item label="用户编号"
                >{{ formData.user?.sn || "-" }}
              </el-form-item>
              <el-form-item label="用户昵称">
                {{ formData.user?.nickname || "-" }}
              </el-form-item>
              <el-form-item label="手机号码"
                >{{ formData.user?.mobile || "-" }}
              </el-form-item>
              <el-form-item label="申请时间"
                >{{ formData.create_time || "-" }}
              </el-form-item>
            </el-form>
          </div></el-col
        >
        <el-col :span="12">
          <div class="grid-content ep-bg-purple-light">
            <el-form :model="formData" class="demo-form-inline">
              <el-form-item label="提现金额"
                >{{ formData.money || "-" }}
              </el-form-item>
              <el-form-item label="提现手续费"
                >{{ formData.handling_fee || "-" }}
              </el-form-item>
              <el-form-item label="到账金额"
                >{{ formData.left_money || "-" }}
              </el-form-item>
              <el-form-item label="提现方式"
                >{{ formData.type_desc || "-" }}
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <el-form :model="formData" class="demo-form-inline">
        <el-form-item label="提现状态"
          >{{ formData.status_desc || "-" }}
        </el-form-item>
        <el-form-item label="支付宝账号">
          {{ formData.account || "-" }}
        </el-form-item>
        <el-form-item label="真实姓名"
          >{{ formData.real_name || "-" }}
        </el-form-item>
        <el-form-item label="用户备注"
          >{{ formData.apply_remark || "-" }}
        </el-form-item>
        <el-form-item label="收款码">
          <el-image
            :src="formData.money_qr_code"
            style="width: 80px; height: 80px"
          ></el-image>
        </el-form-item>
      </el-form>
      <el-divider />
      <el-form :model="formData" class="demo-form-inline">
        <el-form-item label="审核说明"
          >{{ formData.verify_remark || "-" }}
        </el-form-item>
      </el-form>
      <el-divider />
      <el-form :model="formData" class="demo-form-inline">
        <el-form-item label="转账凭证">
          <el-image
            :src="formData.transfer_voucher"
            style="width: 80px; height: 80px"
          ></el-image>
        </el-form-item>
        <el-form-item label="转账说明"
          >{{ formData.transfer_remark || "-" }}
        </el-form-item>
      </el-form>
    </div>
  </popup>
</template>

<script lang="ts" setup>
import { withdrawDetial, withdrawList } from "@/api/finance";
import Popup from "@/components/popup/index.vue";

const formData = ref<any>({});
const props = withDefaults(
  defineProps<{
    id: string | number;
    title: string;
  }>(),
  {
    id: "",
    title: "",
  }
);

// 获取详情
const getdetial = async (): Promise<void> => {
  const res = await withdrawDetial({ id: props.id });
  formData.value = res;
};
const handleconfirm = async () => {
  await withdrawList();
};
</script>

<style lang="scss" scoped>
.el-divider--horizontal {
  margin-top: 0px;
}
// todo
:deep(.el-dialog__footer){
  text-align:center
}
</style>
